Virtual DOM

• 리액트는 렌더링 성능을 높이기 위해 가상 돔을 활용한다.
• 브라우저에서 DOM 변경을 하는 것은 비교적 오랜 시간을 잡아먹는 일이다. 따라서 리액트는 DOM 변경을 최소화 하고자 가상 돔을 도입했다.
• 리액트는 메모리에 가상 돔을 올려두고, 이전과 이후의 가상 돔을 비교한다. 그리고 변경된 부분만 실제 돔에 반영한다.
• KEY값을 변경하면, React는 아예 새로운 컴포넌트라 생각해서, 기존에 있던 컴포넌트를 지우고, 새로운 컴포넌트를 DOM에 삽입하게 된다.
  • 이렇게 컴포넌트가 삭제되는 것을 unmount라 한다.
  • 컴포넌트가 새롭게 삽입되는 것을 mount라고 한다.
• 컴포넌트는 mount될 때, 상태를 useState의 인자로 초기화 한다.
  • key 값이 바뀌면 unmount -> mount를 하게 되는데, 조건부 렌더링으로도 비슷한 효과를 낼 수 있다.

• 하나의 화면을 표시하기 위해, 여러 개의 리액트 요소가 트리 구조 로 구성된다.

  • jsx의 모든 것이 리액트 요소 트리로 구성된다.
  • 리액트 요소 트리는, 어느 순간에 보여진 화면의 구성을 담고 있는 것이다.

• 리액트에서 데이터 변경에 의한 화면 업데이트는 두 단계로 나뉜다.

  1. 렌더 단계(가상 돔) 실제 돔에 반영할 변경 사항을 파악하는 단계다. 변경 사항을 파악하기 위해 가상돔을 활용한다. 리액트는 렌더링 할 때마다, 가상 돔을 만들고 이전의 가상 돔과 비교한다.
  2. 커밋 단계(실제 돔) 파악한 변경 사항을 실제 돔에 적용하는 단계다